import "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js";
import "https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js";
import {
    Indexhead
} from "./index_module.js";


// let site = 0;
class Detail {
    constructor() {
        this.indexHead = new Indexhead();
        this.sid = location.search.substring(1).split('=')[1]; //获取地址栏要传输的id
        this.detailrender();
        this.addcart();
    }
    detailrender() {
        if (!this.sid) { //设置默认的sid
            this.sid = '1';
        }
        $.ajax({
            url: 'http://10.31.163.57/gree/php/detail.php',
            data: {
                sid: this.sid
            },
            dataType: 'json',
            success: function(data) {
                $('.mic').html(`<a href="list.html">空调</a> &gt; 家用空调 &gt;${data.title}`); //添加详情中目录的标题
                $('.right-po_re h2').html(data.title); //添加详情大标题
                $('.shoujia').html('￥' + data.price); //添加详情价格
                $('.xiaoliang').html(data.sailnumber + '件'); //添加销售量
                $('.smallpic').attr('src', data.url); //添加大图片地址
                $('.bigpic').attr('src', data.url);
                let arr = data.picurls.split(','); //将返回的对象的data.picurls转为数组。

                let str = '';
                $.each(arr, function(index, value) { //将该数组遍历渲染
                    str += `<li>
                                 <img src="${value}" alt="">
                           </li>`;
                })
                $('.smallimg ul').html(str);

                //移入小图片，将大图片的地址也改变
                $('.simg-wrap ul li img').hover(function() {
                    $('.smallpic').attr('src', $(this).attr('src'));
                    $('.bigpic').attr('src', $(this).attr('src'));
                }, function() {
                    return;
                })
            }
        })

        //左右按钮移动ul,使后续图片显示
        this.site = 0; //将移动距离初始为0
        //width():jquery下面的方法获取内容宽高
        //innerWidth():jquery下面的方法获取内容宽高+padding
        //outerWidth():jquery下面的方法获取盒模型的宽高(内容宽高+padding+border)
        //outerWidth(true):jquery下面的方法获取盒模型的宽高(内容宽高+padding+border+margin)
        if (this.site === 0) { //初始时左边按钮隐藏
            $('#left-img').css({ color: '#fff' });
        }

        $('#left-img').on('click', () => { //点左键将ul右移一个li的宽度
            $('#right-img').css({ color: '#333' }); //当左箭头点击时显示右箭头
            if (this.site < 0) { //判断可以点击的范围

                this.site += this.simg_li_w;
                $('.simg-wrap ul').animate({ 'margin-left': this.site + 'px' }, 300);
            }
            if (this.site === 0) { //当到达最左边时，将左箭头隐藏
                $('#left-img').css({ color: '#fff' });
            }
        })
        $('#right-img').on('click', () => { //点右键将ul左移一个li的宽度
            this.simg_li_w = $('.simg-wrap ul li').eq(0).outerWidth(); //读取li的宽度
            this.simg_li_length = $('.simg-wrap ul li').size(); //读取li的长度
            $('#left-img').css({ color: '#333' }); //当右箭头点击时显示左箭头
            if (this.site > -(this.simg_li_length - 4) * this.simg_li_w) { //（小图片数量-可以显示的图片）乘以li的宽度即this.site的最小值
                this.site -= this.simg_li_w;
                $('.simg-wrap ul').animate({ 'margin-left': this.site + 'px' }, 300);
            }
            if (this.site === -(this.simg_li_length - 4) * this.simg_li_w) {
                $('#right-img').css({ color: '#fff' });
            }
        })

        //放大镜效果

        //比例 = 大图/大放大镜

        this.scale = $('.bigpic').outerWidth() / $('.smallpic').outerWidth();
        let that = this;
        $('.spic').hover(function() {
            $('.small-glass').css({
                visibility: 'visible'
            });
            $('.big-glass').css({
                visibility: 'visible'
            });
            //小放大镜 = 小图*大放大镜/大图
            $('.small-glass').css({
                width: $('.big-glass').outerWidth() * $('.smallpic').outerWidth() / $('.bigpic').outerWidth(),
                height: $('.big-glass').outerHeight() * $('.smallpic').outerHeight() / $('.bigpic').outerHeight()
            });

            //鼠标跟随
            $('.spic').on('mousemove', function(ev) { //ev.pageX,ev.pageY 离文档的距离
                //计算小放大镜的left值和top值
                let left = ev.pageX - $('.spic').offset().left - $('.small-glass').outerWidth() / 2;
                let top = ev.pageY - $('.spic').offset().top - $('.small-glass').outerHeight() / 2;

                if (left <= 0) { //判断左右极限
                    left = 0;
                } else if (left >= $('.smallpic').outerWidth() - $('.small-glass').outerWidth()) {
                    left = $('.smallpic').outerWidth() - $('.small-glass').outerWidth();
                }
                if (top <= 0) { //判断上下的界限
                    top = 0;
                } else if (top >= $('.smallpic').outerHeight() - $('.small-glass').outerHeight()) {
                    top = $('.smallpic').outerHeight() - $('.small-glass').outerHeight();
                }
                $('.small-glass').css({ //修改小放大镜的样式
                    left: left,
                    top: top
                })
                $('.bigpic').css({ //按比例修改大图的样式
                    left: -left * that.scale,
                    top: -top * that.scale
                })
            })
        }, function() {
            $('.small-glass').css({
                visibility: 'hidden'
            });
            $('.big-glass').css({
                visibility: 'hidden'
            });
        })

    }


    addcart() {
        $('.btn-add').on('click', () => { //添加商品数量
            $('#productNumD').val(parseInt($('#productNumD').val()) + 1 + '');
        })
        $('.btn-reduce').on('click', () => { //减少商品数量
            if ($('#productNumD').val() !== '1') { //商品数量至少要为1
                $('#productNumD').val(parseInt($('#productNumD').val()) - 1 + '');
            }
        })
        $('#productNumD').on('input', function() { //输入判断是否为数字
            if (!/^\d+$/.test($(this).val())) {
                $(this).val(1);
            }
        })

        $('.shop').on('click', () => {
            if ($.cookie('productId') && $.cookie('productNum')) { //判断是否为第一次添加购物车
                this.sidArr = $.cookie('productId').split(',');
                this.numberArr = $.cookie('productNum').split(',');
            } else {
                this.sidArr = []; //存储商品的id
                this.numberArr = []; //存储商品购买的数量
            }
            if (this.sidArr.includes(this.sid)) { //判断数组中是否存在此ID,如果存在，说明不是第一次，直接追加数量
                this.index = this.sidArr.indexOf(this.sid);
                this.numberArr[this.index] = parseInt(this.numberArr[this.index]) + parseInt($('#productNumD').val()); //通过当前sid的索引找到其对应的商品数量,将新增的商品购买数量累加进原购买量。
                $.cookie('productNum', this.numberArr, { expires: 30, path: '/' });

            } else { //第一次购买，直接添加入数组并存入本地存储
                this.sidArr.push(this.sid);
                $.cookie('productId', this.sidArr, { expires: 30, path: '/' });
                this.numberArr.push($('#productNumD').val());
                $.cookie('productNum', this.numberArr, { expires: 30, path: '/' });
            }
            alert('加入购物车成功！');
        })

    }
}



export {
    Detail
}